<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

<script>
    let drawing = document.getElementById("drawing");

    if (drawing.getContext) {
        let context = drawing.getContext('2d')
        console.log(context)
        context.strokeStyle = 'red'
        // context.fillStyle = "#0000ff"
            // 绘制红色矩形
        context.fillStyle = "#ff0000";
        context.fillRect(10, 10, 50, 50);
        // 绘制半透明蓝色矩形
        context.fillStyle = "rgba(0,0,255,0.5)";
        context.fillRect(30, 30, 50, 50);
        
        context.strokeStyle = '#cccccc'
        context.strokeRect(20,20,50,50)
        
        context.strokeStyle = 'rgba(0,0,255,0.5)'
        context.strokeRect(80,80,50,50)
    }
</script>
</body>
</html>